<!--租客到期分析 & 收支分析-->
<template>
  <a-card
    :title="title"
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #extra>
      <div v-if="analyzeType === 'bill'">
        <a-select
          v-model:value="receiveCollectField"
          style="width: 49%; margin-right: 2%"
          @change="getData"
          size="small"
        >
          <a-select-option value="receivable_payment_date">按应收时间</a-select-option>
          <a-select-option value="start_date">按应收有效期开始时间</a-select-option>
        </a-select>
        <a-select
          v-model:value="receivePaymentField"
          style="width: 49%"
          @change="getData"
          size="small"
        >
          <a-select-option value="receivable_payment_date">按应支时间</a-select-option>
          <a-select-option value="start_date">按应支有效期开始时间</a-select-option>
        </a-select>
      </div>
    </template>
    <a-spin :spinning="spinning">
      <div class="chart-box">
        <div :id="chartId" class="chart"></div>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  toRefs, onUnmounted,
} from "vue";
import { message } from "ant-design-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import _ from "lodash";
export default defineComponent({
  name: "halfYearAnalyze",
  props: {
    analyzeType: {
      type: String,
      default: '',  // 租客 tenant  收支 bill
    },
    title: {
      type: String,
      default: '',
    },
    chartId: {
      type: String,
      default: '',
    },
    requestUrl: {
      type: String,
      default: '',
    }
  },
  components: {

  },
  setup(props, context) {
    const state = reactive({
      spinning: false,
      chart: {},
      listTimer: null,
      receiveCollectField: 'receivable_payment_date',
      receivePaymentField: 'receivable_payment_date',
    })

    const getData = () => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        let params = {};
        if (props.analyzeType === 'bill') {
          params.receiveCollectField = state.receiveCollectField;
          params.receivePaymentField = state.receivePaymentField;
        }
        request
          .get("/org", props.requestUrl, params)
          .then((res) => {
            state.chart.changeData(res.list);
            state.chart.render();
            state.spinning = false;
          }).catch((err) => {
          state.spinning = false;
        });
      }, 500)
    }

    const renderChart = () => {
      state.chart = new Chart({
        container: props.chartId,
        autoFit: true,
        appendPadding: [5,0, 0, 0],
      });

      state.chart.scale( 'total' , {
        min: 0,
        nice: true,
      });
      state.chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      state.chart.legend("name", {
        position: "top-left",
      });

      state.chart.annotation().text({
        top: true,
        position: ['end', 'end'],
        content: props.analyzeType === 'tenant' ? '单位:间/套' : '单位:万元',
        style: {
          fill: '#8c8c8c',
          fontWeight: 300,
          fontSize: '12',
        },
        offsetY: -22,
        offsetX: -60,
      })

      state.chart
        .line()
        .position('date*total')
        .color('name')

      state.chart
        .point()
        .position('date*total')
        .color('name')
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1,
        });
      getData();
      state.chart.render();
    }



    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    })


    return {
      ...toRefs(state),
      getData,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart {
    flex: 1;
  }
}
:deep(.ant-tabs-bar) {
  padding: 0!important;
}
:deep(.ant-tabs-bar) {
  border-bottom: none!important;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>